<template>
	<view>
		<u-navbar :title="$t('转换')"></u-navbar>
		<view class="goodsList">
			<view class="list" v-for="(item,idx) in data" :key="idx">
				<view class="goods">
					<image :src="item.image" mode=""></image>
					<view class="info">
						<view class="tit">{{item.name}}</view>
						<!-- <view class="shengyu">剩余：1</view> -->
					</view>
				</view>
				<view class="tip">
					<view class="bi">
						<text
							v-if="item.is_exchange_coin == 0">{{$t('转换价格')}}：<text>{{item.price}}</text>{{$t('幸运币')}}</text>
						<text v-else-if="item.is_exchange_coin == 2">{{$t('转换价格')}}：<text>{{$t('¥')}}{{item.price}}</text></text>
					</view>
					<!-- <u-number-box v-model="value" min="1" @change="valChange"></u-number-box> -->
				</view>
			</view>
		</view>
		<view class="rule">
			<!-- <view class="tit">
				转换规则
			</view> -->
			<rich-text :nodes="rule"></rich-text>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="btm">
			<view class="btmbox">
				<view class="n-flex-row n-align-center">
					{{$t('共')}}{{data.length}}{{$t('件')}} | {{$t('合计')}}：<text class="bi"><text
							class="num">{{total}}</text>{{$t('幸运币')}}</text> <button
						@click="duihuan">{{$t('立即转换')}}</button>
				</view>
			</view>
		</view>
		<!-- <view class="newagain">
			新人首次转换，额外得重抽卡*1
		</view> -->
		<u-popup v-model="oneshow" mode="center">
			<view class="onebox">
				<view class="bg">
					<view class="tit">{{$t('新人首次转换得')}}</view>
					<view class="num">{{$t('重抽卡')}}*1</view>
				</view>
				<view class="text">
					<view class="tip1">
						{{$t('幸运币转换根据市场成本变化，一经转换无法撤销，请确认是否转换')}}？
					</view>
					<view class="btns">
						<view class="qu" @click="oneshow = false">{{$t('取消')}}</view>
						<view class="que" @click="success">{{$t('确定')}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="show" @confirm="confirm" :content="$t('幸运币转换根据市场成本变化，一经转换无法撤销，请确认是否转换')"
			:show-cancel-button="true" :title="$t('提示')" :confirmText="$t('确认')" :cancelText="$t('取消')"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '1',
				oneshow: false,
				rule: '',
				data: '',
				show: false,
				id: '',
				total: 0,
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getRule()
			this.data = uni.getStorageSync('dui')
			this.data.forEach(item => {
				this.total = this.total + item.price * 1
			})
			this.total = this.total.toFixed(2)
		},
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: '../../pages/my/login'
				})
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			duihuan() {
				// this.oneshow = true
				this.show = true
			},
			success() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				})
			},
			confirm() {
				let num = []
				this.data.forEach(item => {
					num.push(item.id)
				})
				if (num.length == 1) {
					num = num[0]
				} else {
					num = num.join()
				}
				// return
				this.$http({
					url: "api/order/prize_exchange",
					data: {
						id: num
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.$tip.tip(res.data.msg)
				        uni.switchTab({
				        	url: '/pages/tabBar/cangku'
				         })
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			getRule() {
				this.$http({
					url: "api/common/get_agreement",
					data: {
						name: 'exchange_tisp'
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.rule = res.data.data.content
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F4FC;
	}

	.goodsList {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.goodsList .list {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.goodsList .list .goods {
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #F3F3F3;
	}

	.goodsList .list .goods image {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
	}

	.goods .info {
		margin-left: 20rpx;
		width: 100%;
	}

	.goods .info .shengyu {
		color: #999;
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.tip {
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tip .bi {
		color: #F87A01;
		margin-top: 10rpx;
	}

	.tip .bi text {
		font-size: 34rpx;
		margin-right: 10rpx;
		font-weight: bold;
	}

	.rule {
		padding: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		box-sizing: border-box;
		width: 710rpx;
	}

	.rule .tit {
		color: #999;
		font-size: 24rpx;
	}

	.btm {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.btmbox {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* .btmbox text{
		font-size: 36rpx;
		font-weight: bold;
	} */
	.btmbox button {
		background-color: #00E1DB;
		color: #fff;
		margin-left: 20rpx;
		width: 250rpx;
	}

	.btmbox .bi {
		color: #F87A01;
	}

	.btmbox .num {
		font-size: 36rpx;
		font-weight: bold;
	}

	.newagain {
		position: fixed;
		left: 0;
		bottom: 180rpx;
		color: #21616A;
		background-image: linear-gradient(#8DE7EC, #e6ffff);
		border: 1rpx solid #D1FBFE;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-shadow: 0 10rpx 30rpx #BFD7DB;
	}

	.onebox {
		width: 600rpx;
		background-color: #fff;
	}

	.onebox .bg {
		background: url('https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/dingdangpf.png') no-repeat;
		background-size: 100%;
		height: 270rpx;
		padding-top: 60rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.onebox .bg .tit {
		color: #63A8A6;
		font-size: 50rpx;
		font-family: 'myfont';
	}

	.onebox .bg .num {
		font-family: 'myfont';
		font-size: 60rpx;
		color: #EF662D;
	}

	.onebox .text {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}

	.onebox .text .tip1 {
		color: #999;
	}

	.onebox .text .btns {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.onebox .text .btns view {
		padding: 25rpx 80rpx;
	}

	.onebox .text .btns .qu {
		background-color: #F2F2F2;
	}

	.onebox .text .btns .que {
		background-color: #6EDEDF;
	}
</style>